<template>
    <main>
      <a-card
        v-for="cardRecord of cardRecords"
        :key="cardRecord.month"
        :title="cardRecord.month"
      >
        <a-timeline>
          <a-timeline-item
            v-for="record of cardRecord.data"
            :key="record.id"
            :color="useRandomColor()"
          >
            <a-button @click="toDeatilPage(record.id)">
              {{ record.createdAt }} - {{ record.title }}
            </a-button>
          </a-timeline-item>
        </a-timeline>
      </a-card>
    </main>
  </template>

<script>
    import {
        useRandomColor
    } from "@vp/show/color.js";
    import http from "@u/http";
    import {
        ref,
        watchEffect
    } from "vue";
    import {
        useInfoNotice
    } from "@u/notice";
    import {
        useRoutePathToPage
    } from "@u/router";
    export default {
        setup() {
            const cardRecords = ref([]);

            watchEffect(async() => {
                try {
                    const res = await http.get("/articles/all/archives");
                    cardRecords.value = res.data;
                    console.log(res);
                } catch (error) {
                    useInfoNotice({
                        message: "获取失败",
                        description: error.reason,
                    });
                }
            });
            //点击跳转相关内容页面
            const toDeatilPage = (id) => {
                const toPage = useRoutePathToPage(`/details/${id}`);
                toPage();
            };
            return {
                cardRecords,
                useRandomColor,
                toDeatilPage,
            };
        },
    };
</script>